<template>
    <article class="homePage-Question-box">
        <div class="container">
            <div class="content">
                <header class="clearfix public-header-bg">
                    <p>置业百科</p>
                    <p>DYNAMIC</p>
                </header>
                <div class="inside clearfix">
                    <header class="clearfix">
                        <i>百科</i>
                        <span>海外专家为您答疑解惑</span>
                        <router-link to="/Question" class="right" title="百科-常见问题" alt="百科-常见问题">更多>></router-link>
                    </header>
                    <a-row :gutter="30">
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-fangzi-copy"></i> 房产问题</h4>
                            <a-card :title="null" hoverable :loading="houseQuestionListLoading" v-show="!houseQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in houseQuestion" :key="index">
                                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="houseQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-falv1"></i> 法律问题</h4>
                            <a-card :title="null" hoverable :loading="lawQuestionListLoading" v-show="!lawQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in lawQuestion" :key="index">
                                        <router-link tag="a" :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="lawQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-weibiaoti5"></i> 贷款问题</h4>
                            <a-card :title="null" hoverable :loading="loanQuestionListLoading" v-show="!loanQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in loanQuestion" :key="index">
                                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="loanQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-shenpi"></i> 移民问题</h4>
                            <a-card :title="null" hoverable :loading="immigrationQuestionListLoading" v-show="!immigrationQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in immigrationQuestion" :key="index">
                                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="immigrationQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-zaixianxuexi"></i> 留学问题</h4>
                            <a-card :title="null" hoverable :loading="studyAbroadQuestionListLoading" v-show="!studyAbroadQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in studyAbroadQuestion" :key="index">
                                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="studyAbroadQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                            <h4><i class="iconfont icon-qita2"></i> 其他问题</h4>
                            <a-card :title="null" hoverable :loading="otherQuestionListLoading" v-show="!otherQuestionNoDataShow">
                                <ul>
                                    <li v-for="(item, index) in otherQuestion" :key="index">
                                        <router-link :to="{path: 'QuestionDetails', query: {QuestionId: item.id }}" class="webkit-text-overflow-1lines" target="_blank" :title="item.title" :alt="item.title">
                                            <i class="iconfont icon-weidu"></i>{{isNull0(item.title)}}
                                        </router-link>
                                    </li>
                                </ul>
                            </a-card>
                            <h5 style="text-align: center; padding: 15px; line-height: 100px;" v-show="otherQuestionNoDataShow">暂未查询到数据！</h5>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                houseQuestion: [],  //房产问题
                houseQuestionListLoading: true,//房产问题——列表加载loading
                houseQuestionNoDataShow: false,//房产问题——没有数据提示信息是否显示

                lawQuestion:[],     //法律问题
                lawQuestionListLoading: true,//法律问题——列表加载loading
                lawQuestionNoDataShow: false,//法律问题——没有数据提示信息是否显示

                loanQuestion:[],    //贷款问题
                loanQuestionListLoading: true,//贷款问题——列表加载loading
                loanQuestionNoDataShow: false,//贷款问题——没有数据提示信息是否显示

                immigrationQuestion:[], //移民问题
                immigrationQuestionListLoading: true,//移民问题——列表加载loading
                immigrationQuestionNoDataShow: false,//移民问题——没有数据提示信息是否显示

                studyAbroadQuestion:[], //留学问题
                studyAbroadQuestionListLoading: true,//留学问题——列表加载loading
                studyAbroadQuestionNoDataShow: false,//留学问题——没有数据提示信息是否显示

                otherQuestion:[],   //其他问题
                otherQuestionListLoading: true,//其他问题——列表加载loading
                otherQuestionNoDataShow: false,//其他问题——没有数据提示信息是否显示
            }
        },
        computed: {},
        created() {
        },
        mounted() {
            // 获取置业百科——常见问题数据-房产问题
            this.getQuestionData(10);
            // 获取置业百科——常见问题数据-法律问题
            this.getQuestionData(11);
            // 获取置业百科——常见问题数据-贷款问题
            this.getQuestionData(12);
            // 获取置业百科——常见问题数据-移民问题
            this.getQuestionData(13);
            // 获取置业百科——常见问题数据-留学问题
            this.getQuestionData(14);
            // 获取置业百科——常见问题数据-其他问题
            this.getQuestionData(15);
        },
        methods: {
            // 获取置业百科——常见问题数据-其他问题
            getQuestionData(type) {
                this.$get('/news/list/'+ type +'/1/4').then(res => {
                    if (res.status == 0) {
                        switch (type){
                            case 10:
                                this.houseQuestion = res.list;
                                this.houseQuestionNoDataShow = false;
                                this.houseQuestionListLoading = false;
                                break;
                            case 11:
                                this.lawQuestion = res.list;
                                this.lawQuestionNoDataShow = false;
                                this.lawQuestionListLoading = false;
                                break;
                            case 12:
                                this.loanQuestion = res.list;
                                this.loanQuestionNoDataShow = false;
                                this.loanQuestionListLoading = false;
                                break;
                            case 13:
                                this.immigrationQuestion = res.list;
                                this.immigrationQuestionNoDataShow = false;
                                this.immigrationQuestionListLoading = false;
                                break;
                            case 14:
                                this.studyAbroadQuestion = res.list;
                                this.studyAbroadQuestionNoDataShow = false;
                                this.studyAbroadQuestionListLoading = false;
                                break;
                            case 15:
                                this.otherQuestion = res.list;
                                this.otherQuestionNoDataShow = false;
                                this.otherQuestionListLoading = false;
                                break;
                        }
                    } else {
                        console.log(res.msg);
                        switch (type){
                            case 10:
                                this.houseQuestionNoDataShow = true;
                                break;
                            case 11:
                                this.lawQuestionNoDataShow = true;
                                break;
                            case 12:
                                this.loanQuestionNoDataShow = true;
                                break;
                            case 13:
                                this.immigrationQuestionNoDataShow = true;
                                break;
                            case 14:
                                this.studyAbroadQuestionNoDataShow = true;
                                break;
                            case 15:
                                this.otherQuestionNoDataShow = true;
                                break;
                        }
                    }
                });
            },
        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        .homePage-Question-box{
            padding: 40px 0;
            >.container{
                >.content{
                    >.inside{
                        padding: 23px;
                        margin: 33px 0 0 0;
                        border: 1px solid #ccc;
                        box-shadow: 2px 5px 15px -5px #858585;
                        -webkit-box-shadow: 2px 5px 15px -5px #858585;
                        -moz-box-shadow: 2px 5px 15px -5px #858585;
                        -ms-box-shadow: 2px 5px 15px -5px #858585;
                        -o-box-shadow: 0px 2px 13px -2px #858585;
                        >header{
                            line-height: 33px;
                            >i{
                                font-size: 18px;
                                color: #3b9de1;
                            }
                            >span{
                                margin: 0 0 0 15px;
                            }
                        }
                       >.ant-row{
                           >div{
                               margin: 25px 0 0 0;
                               >h4{
                                   width: 150px;
                                   height: 40px;
                                   line-height: 40px;
                                   font-size: 16px;
                                   color: #fff;
                                   background: #3b9de1;
                                   position: relative;
                                   padding: 0 20px;
                                   z-index: 6;
                               }
                               >h4:before{
                                   content: '';
                                   position: absolute;
                                   width: 1px;
                                   height: 0px;
                                   right: -20px;
                                   top: 0px;
                                   border-width: 20px 20px;
                                   border-style: solid;
                                   z-index: 5;
                                   border-color: #3b9de1 transparent;
                               }
                               .ant-card {
                                   border: none;
                                   > .ant-card-body {
                                       padding: 0;
                                       > ul {
                                           margin: 15px 0 0 0;
                                           > li {
                                               height: 25px;
                                               line-height: 25px;
                                               margin: 6px 0;
                                               font-size: 16px;
                                               > a {
                                                   color: #666666;
                                                   text-decoration: none;
                                               }
                                               > a:hover {
                                                   color: #0087e5;
                                               }
                                           }
                                       }
                                   }
                               }
                               .ant-card-hoverable:hover {
                                   box-shadow: none;
                               }
                           }
                       }
                    }
                }
            }
        }
    }
</style>
